<template>
  <div class="modify-dialog">
    <slot>
      <el-button size="small" type="primary" @click="showDialog()">
        新增售后
      </el-button>
    </slot>
    <el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
      <Form v-bind="formOpts" v-on="formEvent">
        <template #formSuf>
          <el-form-item label="材料" style="width: 100%">
            <ProductInput v-model="arr" />
          </el-form-item>
        </template>
        <template #formBtn>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onConfirm"> 确 定 </el-button>
          </div>
        </template>
      </Form>
    </el-dialog>
  </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
import ProductInput from "./ProductInput.vue";
export default {
  mixins: [modifyMixins],
  components: {
    ProductInput,
  },
  data() {
    return {
      form: {
        orderName: {
          tag: "el-input",
          label: "订单名称",
          value: "",
          props: {
            clearable: true,
            filterable: true,
            placeholder: "请输入订单名称",
          },
        },
        reason: {
          tag: "el-select",
          label: "售后原因",
          value: "",
          items: [],
          props: {
            clearable: true,
            filterable: true,
          },
        },
        warehouseId: {
          tag: "el-select",
          label: "仓库",
          value: "",
          items: [],
          props: {
            clearable: true,
            filterable: true,
          },
        },
        targetId: {
          label: "售后门店",
          tag: "el-select",
          value: "",
          items: [],
          props: {
            clearable: true,
            filterable: true,
          },
        },
        handleMethod: {
          tag: "el-input",
          label: "处理方式",
          value: "",
          props: {
            rows: 3,
            type: "textarea",
            clearable: true,
            placeholder: "请输入备注",
          },
        },
        // storeName: {
        //   tag: "el-select",
        //   label: "门店名称",
        //   value: "",
        //   items: [],
        //   props: {
        //     clearable: true,
        //     filterable: true,
        //   },
        // },
        // refundAmount: {
        //   tag: "el-input-number",
        //   label: "退款金额",
        //   value: "",
        //   props: {
        //     min: 0,
        //     placeholder: "请输入退款金额",
        //   },
        // },
        finishStatus: {
          tag: "el-select",
          label: "完成状态",
          value: 1,
          defValue: 1,
          items: [
            { label: "未完成", value: 0 },
            { label: "已完成", value: 1 },
          ],
          props: {},
        },
        remark: {
          tag: "el-input",
          label: "备注",
          value: "",
          props: {
            rows: 3,
            type: "textarea",
            clearable: true,
            placeholder: "请输入备注",
          },
        },
      },
    };
  },
  watch: {},
  mounted() {
    this.$api["saleSaleList"]({ pageSize: 10000 ,pageNumber:1}).then((res) => {
      this.form.targetId.items = (res?.rows || []).map((e) => ({
        label: e.storeName,
        value: e.saleId,
      }));
      this.formKey = this.$quinn.guid();
    });
  },
  methods: {
    showDialog(modify = "add", row = {}) {
      this.dialogVisible = true;
      this.row = row;
      this.modify = modify || "add";
      const keys = ["finishStatus"];
      this.form.warehouseId.items = this.$store.getters.warehouseListItems;
      this.form.reason.items = this.$store.state.aftersaleReasonList;
      for (const key in this.form) {
        let defValue = "";
        if (Array.isArray(this.form[key].value)) defValue = [];
        if (Object.hasOwnProperty.call(row, key))
          this.form[key].value = row[key];
        else this.form[key].value = defValue;
        this.form[key].hidden = false;
        if (modify == "add") this.form[key].hidden = keys.includes(key);
      }
      try {
        if (modify == "edit") this.arr = JSON.parse(row.materials);
      } catch (e) {}
      this.formKey = this.$quinn.guid();
    },
    onSubmit(form) {
      const { modify, row } = this;
      form.materialList = this.arr.map((e) => ({ count: e.count, id: e.id }));
      if (modify === "add")
        this.$api["afterSaleAfterSaleAdd"](form).then(this.submitDoneMsg);
      else if (modify == "edit")
        this.$api["afterSaleAfterSaleUpdate"]({
          ...form,
          afterSaleId: row.afterSaleId,
        }).then(this.submitDoneMsg);
    },
  },
};
</script>

<style lang="less" scoped></style>
